<template>
	<view class="page index">
		<empty v-if="empty" desc="该联系人已删除"></empty>
		<view v-if="!empty" class="form">
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						所属客户
					</view>
					<view class="value">
						{{detail.customerName || '无'}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						姓名
					</view>
					<view class="value">
						{{detail.name || '无'}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						职务
					</view>
					<view class="value">
						{{detail.post || '无'}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						类型
					</view>
					<view class="value">
						{{detail.master ? '关键决策人' : '非关键决策人'}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						手机号码
					</view>
					<view class="value">
						{{detail.mobile || '无'}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						电话号码
					</view>
					<view class="value">
						{{detail.telephone || '无'}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						邮箱地址
					</view>
					<view class="value">
						{{detail.email || '无'}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						家庭住址
					</view>
					<view class="value">
						{{detail.detailAddress || '无'}}
					</view>
				</view>
			</view>
			<view class="item-list">
				<view class="border"></view>
				<view class="item">
					<view class="title">
						生日
					</view>
					<view class="value">
						{{detail.birthday ? detail.birthday[0] + '-' + detail.birthday[1] + '-' + detail.birthday[2] : '无'}}
					</view>
				</view>
				<view class="border"></view>
			</view>
			<view class="text">
				<view class="title">
					<view>
						备注
					</view>
				</view>
				<textarea v-model="detail.remark" placeholder="没有备注信息" :disabled="true" placeholder-class="place"></textarea>
			</view>
		</view>
		<view v-if="!empty" class="footer">
			<button class="cancel" @click="cancel">删除联系人</button>
			<button class="edit" @click="edit">编辑</button>
		</view>
		<!-- 删除联系人 -->
		<uni-popup ref="cancelContact" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						删除联系人
					</view>
					<view class="content">
						确定要删除联系人吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.cancelContact.close()">取消</button>
					<button class="confire" @click="confire">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getContactDetailApi, deleteContactApi} from "@/api/contact_api.js";
	import empty from "@/components/empty.vue"
	export default{
		components:{
			empty
		},
		data() {
			return{
				id: 0,
				detail: {},
				empty:false
			}
		},
		onLoad(e) {
			this.id = e.id;
			
		},
		onShow() {
			uni.showLoading({
				mask:true,
				title:'加载中...'
			})
			this.getContactDetail();
		},
		methods:{
			// 获取联系人详情
			async getContactDetail(){
				let res = await getContactDetailApi(this.id);
				this.detail = res.data;
				await uni.hideLoading();
			},
			// 编辑
			edit(){
				uni.navigateTo({
					url: `/pages/index/contact/edit?details=${JSON.stringify(this.detail)}`
				})
			},
			// 删除
			cancel(){
				this.$refs.cancelContact.open();
			},
			confire(){
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				deleteContactApi(this.id).then(() => {
					uni.hideLoading();
					uni.showToast({
						icon:'success',
						title:'删除成功'
					})
					this.empty = true;
				}).catch(() => {
					uni.hideLoading();
				})
				this.$refs.cancelContact.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 24rpx 0;
		@include flex-c;
		.form{
			flex: 1 0 0;
			overflow: auto;
			.item-list{
				.border{
					width: 100%;
					height: 4rpx;
					background-color: #e5e5e5;
				}
				.item{
					@include flex-r-between-center;
					line-height: 114rpx;
					padding: 0 30rpx;
					.title{
						flex: 0 0 auto;
						padding-right: 40rpx;
						font-size: 28rpx;
						color: #101010;
					}
					.value{
						flex: 1 0 0;
						font-size: 28rpx;
						color: #909090;
						text-align: right;
					}
				}
			}
			.text{
				border-bottom: 4rpx #e5e5e5 solid;
				padding: 12rpx 30rpx;
				.title{
					font-size: 28rpx;
					color: #101010;
					padding: 0 0 16rpx;
					display: flex;
					align-items: center;
					.require{
					  height: 28rpx;
					  width: 6rpx;
					  background-color: #c24135;
					  margin-left: 10rpx;
				  }
				}
				textarea{
					font-size: 28rpx;
					color: #909090;
					height: 125rpx;
				}
				.place{
					font-size: 28rpx;
					color: #909090;
				}
			}
			&::-webkit-scrollbar{
				display: none;
			}
		}
		.footer{
			flex: 0 0 auto;
			padding: 24rpx 30rpx;
			@include flex-r-between-start;
			button{
				@include button;
				color: #fff;
				height: 60rpx;
				width: 45%;
				line-height: 60rpx;
				font-size: 28rpx;
			}
			.cancel{
				background-color: #bebebe;
			}
			.edit{
				background-color: #198AFA;
			}
		}
		.model-popup{
			width: 600rpx;
			background-color: #fff;
			@include box;
			border-radius: 16rpx;
			.top{
				padding: 24rpx 40rpx 56rpx;
				.title{
					color: #101010;
					font-size: 36rpx;
					text-align: center;
					padding: 0 0 34rpx;
				}
				.content{
					color: #747474;
					font-size: 28rpx;
					text-align: center;
				}
			}
			.bottom{
				@include flex-r;
				border-top: 4rpx #F0F0F2 solid;
				button{
					@include button;
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					background-color: #fff;
					border-radius: 0;
				}
				.cancle{
					color: #BBBBBB;
					border-right: 4rpx #F0F0F2 solid;
				}
				.confire{
					color: #4095E5;
				}
			}
		}
	}
</style>